<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./stylesheets/index.css">
  <title>小米官网</title>
</head>
<body>
  <header id="header">
    <div class="container clearfix">
      <nav class="nav-list fl">
        <ul class="clearfix">
          <li>
            <a href="#">小米商城</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">MIUI</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">IoT</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">云服务</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">天星数科</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">有品</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">小爱开放平台</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">企业团购</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">资质证照</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">协议规则</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">下载app</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">智能生活</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">Select Location</a>
          </li>
        </ul>
      </nav>
      <nav class="nav-information fr">
        <ul class="clearfix">
          <li>
            <a href="#">登录</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">注册</a>
            <span>|</span>
          </li>
          <li>
            <a href="#">消息通知</a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont icon-shopping-cart"></i>
              <span>购物车 （0）</span>
            </a>
            <div class="empty-text">
              <span>购物车中还没有商品，赶紧选购吧！</span>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <main id="main">
    <header class="clearfix">
      <div class="icon fl">
        <img src="./images/logo-mi2.png" alt="logo" width="56">
      </div>
      <div class="search fr">
        <input type="text" placeholder="手机">
        <button class="iconfont icon-search"></button>
      </div>
      <nav class="menu-list">
        <ul class="clearfix">
          <li><a href="#">Xiaomi手机</a></li>
          <li><a href="#">Redmi 红米</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">平板</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">路由器</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">社区</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <aside>
        <ul class="iconfont">
          <li><span>手机</span><i></i></li>
          <li><span>电视</span><i></i></li>
          <li><span>笔记本 平板</span><i></i></li>
          <li><span>家电</span><i></i></li>
          <li><span>出行 穿戴</span><i></i></li>
          <li><span>智能 路由器</span><i></i></li>
          <li><span>电源 配件</span><i></i></li>
          <li><span>健康 儿童</span><i></i></li>
          <li><span>耳机 音箱</span><i></i></li>
          <li><span>生活 箱包</span><i></i></li>
        </ul>
      </aside>
    </main>
    <button class="button1"><</button>
     <button class="button2">></button>
    <footer>
      <ul>
        <li>
          <ul>
            <li>
              <img src="./images/clock.png" alt="保障服务" width="24">
              <p>保障服务</p>
            </li>
            <li>
              <img src="./images/hourse.png" alt="企业团购" width="24">
              <p>企业团购</p>
            </li>
            <li>
              <img src="./images/F.png" alt="F码通道" width="24">
              <p>F码通道</p>
            </li>
            <li>
              <img src="./images/mifen.png" alt="米粉卡" width="24">
              <p>米粉卡</p>
            </li>
            <li>
              <img src="./images/money.png" alt="以旧换新" width="24">
              <p>以旧换新</p>
            </li>
            <li>
              <img src="./images/huafeichongzhi.png" alt="话费充值" width="24">
              <p>话费充值</p>
            </li>
          </ul>
        </li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </footer>
  </main>
  <footer id="footer">
    <header></header>
    <main>
      <div class="header clearfix">
        <div class="title fl">手机</div>
        <div class="more fr">
          <span>查看更多</span>
          <i class="iconfont icon-right-arrows"></i>
        </div>
      </div>
      <div class="main">
        <div class="left-group-phone"></div>
        <div class="right-group-phone">
          <ul>
            <li>
              <img src="./images/left-phone01.webp" alt="" width="160">
              <h3 class="title">Xiaomi 12 Pro</h3>
              <p class="desc">全新一代 骁龙8</p>
              <p class="price">4699元起</p>
            </li>
            <li>
              <img src="./images/left-phone02.webp" alt="" width="160">
              <h3 class="title">Xiaomi 12</h3>
              <p class="desc">全新一代 骁龙8</p>
              <p class="price">3699元起</p>
            </li>
            <li>
              <img src="./images/left-phone03.webp" alt="" width="160">
              <h3 class="title">Xiaomi 12X</h3>
              <p class="desc">小尺寸，大升级</p>
              <p class="price">3199元起</p>
            </li>
            <li>
              <img src="./images/left-phone04.webp" alt="" width="160">
              <h3 class="title">Xiaomi 11 青春活力版</h3>
              <p class="desc">轻薄5G，内外皆出彩</p>
              <p class="price">1999元起</p>
            </li>
            <li>
              <img src="./images/left-phone05.webp" alt="" width="160">
              <h3 class="title">Redmi Note 11 Pro系列</h3>
              <p class="desc">Redmi Note 11 Pro系列</p>
              <p class="price">1799元起</p>
            </li>
            <li>
              <img src="./images/left-phone06.webp" alt="" width="160">
              <h3 class="title">Redmi Note 11 5G</h3>
              <p class="desc">5000mAh大电量</p>
              <p class="price">1199元起</p>
            </li>
            <li>
              <img src="./images/left-phone07.webp" alt="" width="160">
              <h3 class="title">Redmi Note 11 4G</h3>
              <p class="desc">5000mAh大电量</p>
              <p class="price">999元起</p>
            </li>
            <li>
              <img src="./images/left-phone08.webp" alt="" width="160">
              <h3 class="title">黑鲨4S Pro</h3>
              <p class="desc">磁动力升降肩键</p>
              <p class="price">4799元起</p>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <footer></footer>
  </footer>
</body>
</html>